﻿@model NAccounting.Models.AppointmentDetailModel

@{
    ViewBag.Title = "Edit";
}

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"></script>
<script src="@Url.Content("~/Scripts/fullcalendar.min.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.timeentry.min.js")"></script>
<script src="@Url.Content("~/Scripts/date.js")"></script>
<link rel='stylesheet' type='text/css' href='@Url.Content("~/Content/fullcalendar.css")' />

<script language="javascript">

    $(function () {

        var defaultDate = Date.parse('@Model.Date');

        $('.timer').timeEntry({
            beforeShow: function (input) {
                return { minTime: (input.id == 'EndTime' ?
                $('#StartTime').timeEntry('getTime') : null),
                    maxTime: (input.id == 'StartTime' ?
                $('#EndTime').timeEntry('getTime') : null)
                };
            },
            spinnerImage: '/images/spinnerUpDown.png',
            spinnerSize: [15, 16, 0],
            spinnerIncDecOnly: true,
            show24Hours: true
        }).css('width', 50);

        $(".datepicker").datepicker({
            changeMonth: true,
            changeYear: true,
            onSelect: function () {
                $('#fullCalendar').fullCalendar('gotoDate', Date.parseExact($("#datepicker").val(), "d/M/yyyy"));
                $('#Date').val($("#datepicker").val());
            }
        });

        var calendarAppointmentsUrl = '@Url.Action("GetAppointmentsByDate")'

        $('#fullCalendar').fullCalendar({
            dayNames: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quita', 'Sexta', 'Sábado'],
            events: calendarAppointmentsUrl + "/?date=" + $("#datepicker").val(),
            theme: true,
            header: false,
            defaultView: 'agendaDay',
            allDaySlot: false,
            height: 300,
            editable: false,
            selectable: true,
            select: function (start, end, allDay) {
                if (!allDay) {
                    $('#StartTime').val(start.toString("HH:mm"));
                    $('#EndTime').val(end.toString("HH:mm"));
                }
            },
            columnFormat: {
                month: 'ddd',    // Mon
                week: 'ddd M/d', // Mon 9/7
                day: 'dddd dd/MMM'  // Monday 9/7
            },
            slotMinutes:15,
            axisFormat: 'HH:mm'
        });

        $("#Description").css("width", $("#textarea-container").width());

        $("#saveButton").click(function () {
            $("form").submit();
        });

        $(".datepicker").datepicker("setDate", defaultDate);
        $('#fullCalendar').fullCalendar('gotoDate', defaultDate);
    });
</script>

<div class="content-left">
    @Html.Partial("ContentLeftPartial")
</div>
<div class="content-right">
    <h2>Edit</h2>
    <p>
        <button id="goToListButton" class="button-icon-return-icon-only">Voltar</button> | 
        <button id="saveButton" class="submit">Salvar</button>
    </p>

@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)

    @Html.HiddenFor(model => model.Id)
    @Html.HiddenFor(model => model.Date)

    <div>
        <h3>Detalhes</h3>
        <div class="editor-label">
            @Html.LabelFor(x => x.Project): <span class="bold"> @Html.DisplayTextFor(x => x.Project)</span>
        </div>
        <div class="editor-label">
            @Html.LabelFor(x => x.ProjectActivityId):
        </div>
        <div class="editor-field">
            @Html.DropDownListFor(x => x.ProjectActivityId, Model.Activities, new { @class = "searchable-combobox" })
            @Html.ValidationMessageFor(x => x.ProjectActivityId)
        </div>
    </div>
    <div>
        <h3>Período</h3>
        <table width="100%" border="0">
            <tr>
                <td colspan="2">Data: </td>
            </tr>
            <tr>
                <td width="198" valign="top"><div class="datepicker" id="datepicker"></div></td>
                <td valign="top">
                    <table border="0" width="100%">
                        <tr>
                            <td>@Html.LabelFor(x => x.StartTime):</td>
                        </tr>
                        <tr>
                            <td>
                                @Html.TextBoxFor(x => x.StartTime, new { @class = "timer" })
                                @Html.ValidationMessageFor(x => x.StartTime)
                             </td>
                        </tr>
                        <tr>
                            <td>@Html.LabelFor(x => x.EndTime):</td>
                        </tr>
                        <tr>
                            <td>
                                @Html.TextBoxFor(x => x.EndTime, new { @class = "timer" })
                                @Html.ValidationMessageFor(x => x.EndTime)
                            </td>
                        </tr>
                        <tr>
                            <td>@Html.LabelFor(x => x.Description):</td>
                        </tr>
                        <tr>
                            <td id="textarea-container">@Html.TextAreaFor(x => x.Description, new { rows = 4 })  @Html.ValidationMessageFor(x => x.Description)</td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>
    <div>
        <h3>Atividades do dia</h3>
        <div id="fullCalendar"></div>
    </div>
    <p>&nbsp;</p>
    
}
</div>